<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="table-container">

        </div>
        <input type="text">
        <button class="btn">切换2.4G</button><button class="btn5">切换5G</button>
    </div>
    <script>
        // 获取ip列表
        (function iplist() {
            fetch('http://127.0.0.1:3000/api/iplist')
                .then(response => {
                    // 检查响应是否成功
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    // 解析JSON格式的响应数据
                    return response.json();
                })
                .then(data => {
                    // 处理从服务器获取的数据
                    console.log(data.data);
                    
                    // 获取要展示表格的父元素
                    const tableContainer = document.getElementById('table-container');

                    // 创建表格元素
                    const table = document.createElement('table');

                    // 创建表头
                    const thead = document.createElement('thead');
                    const headerRow = document.createElement('tr');
                    headerRow.innerHTML = '<th>ID</th><th>IP</th><th>IP5</th>';
                    thead.appendChild(headerRow);
                    table.appendChild(thead);

                    // 创建表格内容
                    const tbody = document.createElement('tbody');

                    // 使用forEach循环遍历数据数组
                    data.data.forEach(item => {
                        // 创建表格行
                        const row = document.createElement('tr');
                        // 创建并设置表格单元格
                        const idCell = document.createElement('td');
                        idCell.textContent = item.id;
                        row.appendChild(idCell);
                        const ipCell = document.createElement('td');
                        ipCell.textContent = item.ip;
                        row.appendChild(ipCell);
                        const ip5Cell = document.createElement('td');
                        ip5Cell.textContent = item.ip5;
                        row.appendChild(ip5Cell);
                        // 将表格行添加到表格内容中
                        tbody.appendChild(row);
                    });
                    // 将表格内容添加到表格中
                    table.appendChild(tbody);
                    // 将表格添加到父元素中
                    tableContainer.appendChild(table);
                })
                .catch(error => {
                    // 处理请求错误
                    console.error('Fetch error:', error);
                });
        })()
        // 请求指定车
        function getCar(ip,setip, api) {
            fetch('http://' + ip + ':3333' + api, {
                method: 'POST', // 指定请求方法为POST
                headers: {
                    'Content-Type': 'application/json', // 指定请求头为JSON格式
                    // 如果有其他的请求头，可以在这里添加
                },
                body: JSON.stringify({
                    ip: setip
                })
            })
                .then(response => {
                    // 检查响应是否成功
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    // 解析JSON格式的响应数据
                    return response.json();
                })
                .then(data => {
                    // 处理从服务器获取的数据
                    console.log(data);
                })
                .catch(error => {
                    // 处理请求错误
                    console.error('Fetch error:', error);
                });
        }
        // 监听按钮点击事件
        document.querySelector('.btn').addEventListener('click', function () {
            let ip = document.querySelector('input').value;
            let setip ='192.168.11.11'
            let api = '/api/setip';
            getCar(ip, setip,api);
        });
        document.querySelector('.btn5').addEventListener('click', function () {
                let ip = document.querySelector('input').value;
                let setip = '192.168.11.11'
            let api = '/api/setip5';

                getCar(ip, setip,api);
            });
    </script>
</body>

</html>